<template>
  <div class="solveAudit">
    <!-- 顶部查询表单 -->
    <div class="topForm">
      <el-form ref="searchForm" :model="searchForm" label-width="80px"  :inline="true" size="mini" class="searchBox">
        <el-row>
          <el-col :span="4">
            <el-form-item label="起始地:" prop="startPlace">
              <el-select v-model="searchForm.startPlace" placeholder="请选择起始地" clearable filterable>
                <el-option
                  v-for="item in placeList"
                  :key="item.ycode"
                  :label="item.chname"
                  :value="item.ycode">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="目的地:" prop="endPlace">
              <el-select v-model="searchForm.endPlace" placeholder="请选择目的地" filterable clearable>
                <el-option
                  v-for="(item,index) in placeList"
                  :key="index"
                  :label="item.chname"
                  :value="item.ycode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="状态:" prop="status">
              <el-select v-model="searchForm.status" placeholder="请选择状态" filterable clearable>
                <el-option
                  v-for="item in statusLists"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-button type="primary" @click="searchBtn">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 解决方案按钮组 -->
    <div class="btnBox">
      <el-button plain size="mini" type="success" @click="audit">审核</el-button>
      <el-button plain size="mini" type="danger" @click="delAudit">取消审核</el-button>
    </div>
    <!-- 主页主体表格 -->
    <div class="tableBox">
      <!-- 上方解决方案表格 -->
      <div class="topTable">
        <el-table :data="mainTopTableData" border :height="mainTopHeight" :header-cell-style="{ textAlign: 'center' }" highlight-current-row @row-dblclick="view" @row-click="mainTopRowClick">
          <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
          <el-table-column prop="pdtStatusName" label="产品状态" align="center" width="110px" show-overflow-tooltip sortable></el-table-column>
          <el-table-column prop="pdtRecommend" label="推荐路线" width="110px" align="center" show-overflow-tooltip sortable :formatter="tuijianluxian"></el-table-column>
          <el-table-column prop="pdtRelease" label="发布" align="center" show-overflow-tooltip sortable :formatter="fabu"></el-table-column>
          <el-table-column prop="pdtTop" label="置顶" align="center" show-overflow-tooltip sortable :formatter="zhiding"></el-table-column>
          <el-table-column prop="pdtStartName" label="起始地" width="90px" show-overflow-tooltip  sortable ></el-table-column>
          <el-table-column prop="pdtStartaddressCh" label="起始港/站" width="110px" show-overflow-tooltip  sortable></el-table-column>
          <el-table-column prop="pdtDestiName" label="目的地" width="90px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="pdtDestinationCh" label="目的港/站" width="110px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="pdtIE" label="进/出口" width="100px" align="center" show-overflow-tooltip sortable :formatter="jinchukou"></el-table-column>
          <el-table-column prop="ptp20gpPrice" label="20GP价格" width="120px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="ptp40gpPrice" label="40GP价格" width="120px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="ptp40hqPrice" label="40HQ价格" width="120px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="pdtDate" label="操作时间(天)" align="right" width="130px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="pdtSttime" label="有效开始日期" width="130px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="pdtEdtime" label="有效结束日期" width="130px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="pdtAuditor" label="审核人" width="90px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="pdtAudittime" label="审核时间" width="110px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="pdtInfo" label="审核意见" width="110px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="pdtCreator" label="创建人" width="90px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="pdtCreatetime" label="创建时间" width="110px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="pdtLstmodifier" label="修改人" width="90px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="pdtLstmodifytime" label="修改时间" width="110px" show-overflow-tooltip sortable ></el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          ref="pagination"
          small
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Pagination.currentPage"
          :page-sizes="Pagination.pageSizeList"
          :page-size="Pagination.PageSize"
          :layout="Pagination.layout"
          :total="Pagination.total">
        </el-pagination>
      </div>
      <!-- 下方解决方案明细表格 -->
      <div class="botTable">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="解决方案明细" name="1">
            <el-table :data="mainBotTableData" border :height="mainBotHeight" :header-cell-style="{ textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }" highlight-current-row @row-click="mainBotRowClick">
              <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
              <el-table-column prop="stnServicecodeName" label="服务代码" width="110px" show-overflow-tooltip sortable></el-table-column>
              <el-table-column prop="tnSupplierEtp" label="供应商" width="110px" show-overflow-tooltip sortable ></el-table-column>
              <el-table-column prop="stnSpl" label="经营人" width="110px" show-overflow-tooltip sortable ></el-table-column>
              <el-table-column prop="stnStartaddress" label="起始港/站" width="110px" show-overflow-tooltip  sortable></el-table-column>
              <el-table-column prop="stnDestination" label="目的港/站" width="110px" show-overflow-tooltip sortable ></el-table-column>
              <el-table-column prop="stn20gpprice" label="20GP价格" width="120px" show-overflow-tooltip sortable ></el-table-column>
              <el-table-column prop="stn20gpcurrency" label="20GP币种" width="120px" show-overflow-tooltip sortable ></el-table-column>
              <el-table-column prop="stn40gpprice" label="40GP价格" width="120px" show-overflow-tooltip sortable ></el-table-column>
              <el-table-column prop="stn40gpcurrency" label="40GP币种" width="120px" show-overflow-tooltip sortable ></el-table-column>
              <el-table-column prop="stn40hqprice" label="40HQ价格" width="120px" show-overflow-tooltip sortable ></el-table-column>
              <el-table-column prop="stn40hqcurrency" label="40HQ币种" width="120px" show-overflow-tooltip sortable ></el-table-column>
              <el-table-column prop="stnCreator" label="创建人" width="90px" show-overflow-tooltip sortable ></el-table-column>
              <el-table-column prop="stnCreatetime" label="创建时间" width="110px" show-overflow-tooltip sortable ></el-table-column>
              <el-table-column prop="stnLstmodifier" label="修改人" width="90px" show-overflow-tooltip sortable ></el-table-column>
              <el-table-column prop="stnLstmodifytime" label="修改时间" width="110px" show-overflow-tooltip sortable ></el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>

    <!-- 审核弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="mainDialog" width="60%" @close="dialogClose" :close-on-click-modal='false' v-el-drag-dialog>
      <div class="dialogBox">
        <div class="dialogTopBox">
          <!-- 左侧基础信息模块 -->
          <div class="topLeft">
            <div class="topLeftTitle">基础信息</div>
            <!-- 基础信息表单 -->
            <div class="basicInfoBox">
              <el-form ref="basicForm" :model="basicForm" :rules="basicRules" label-width="100px"  inline="true" size="mini">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="起始地:" prop="startPlace">
                      <el-select disabled v-model="basicForm.startPlace" placeholder="请选择起始地" clearable filterable  @change="getPortData" @focus="clearStart">
                        <el-option
                          v-for="item in placeList"
                          :key="item.ycode"
                          :label="item.chname"
                          :value="item.ycode">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="目的地:" prop="endPlace">
                      <el-select disabled v-model="basicForm.endPlace" placeholder="请选择目的地" filterable clearable @change="sameToStart" @focus="clearEnd">
                        <el-option
                          v-for="(item,index) in placeList"
                          :key="index"
                          :label="item.chname"
                          :value="item.ycode"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="起运港/站:" prop="startPort">
                      <el-select disabled v-model="basicForm.startPort" placeholder="请选择起始港站" clearable filterable>
                        <el-option
                          v-for="item in portList"
                          :key="item.potCd"
                          :label="item.potCname"
                          :value="item.potCd">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="目的港/站:" prop="endPort">
                      <el-select disabled v-model="basicForm.endPort" placeholder="请选择目的港站" filterable clearable>
                        <el-option
                          v-for="(item,index) in portList1"
                          :key="index"
                          :label="item.potCname"
                          :value="item.potCd"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="推荐路线:" prop="routeRadio">
                      <el-radio disabled v-model="basicForm.routeRadio" label="Y">是</el-radio>
                      <el-radio disabled v-model="basicForm.routeRadio" label="N">否</el-radio>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="运输分类:" prop="transport">
                      <el-select disabled v-model="basicForm.transport" placeholder="请选择运输分类" filterable clearable>
                        <el-option
                          v-for="(item,index) in transportList"
                          :key="index"
                          :label="item.rvCmeaning"
                          :value="item.rvLowValue"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="作业天数:" prop="workDays">
                      <el-input disabled v-model="basicForm.workDays"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="进/出口:" prop="inOutRadio">
                      <el-radio disabled v-model="basicForm.inOutRadio" label="I">进口</el-radio>
                      <el-radio disabled v-model="basicForm.inOutRadio" label="E">出口</el-radio>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="封面图:">
                      <el-button plain size="mini" type="primary" @click="lookImg">查看图片</el-button>
                    </el-form-item>
                    <span style="color: red">* 封面图仅限在推荐栏中有效（275*155）</span>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col  :span="12">
                    <el-form-item label="有效开始日期:" prop="startTime">
                      <el-date-picker disabled v-model="basicForm.startTime" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd" clearable></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col  :span="12">
                    <el-form-item label="有效结束日期:" prop="endTime">
                      <el-date-picker disabled v-model="basicForm.endTime" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd" clearable @change="limitEndTime"></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="22">
                    <el-form-item label="备注:" prop="desc">
                      <el-input disabled type="textarea" v-model="basicForm.desc" style="width: 500px"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
          <!-- 右侧基础信息表格模块 -->
          <div class="topRight">
            <div class="basicTable">
              <el-table :data="basicTableData" border :height="basicTableHeight" :header-cell-style="{ textAlign: 'center' }">
                <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
                <el-table-column prop="ptpSize" label="尺寸" show-overflow-tooltip sortable>
                  <template slot-scope="scope">
                    <el-select disabled v-model="scope.row.ptpSize" filterable clearable size="mini">
                      <el-option
                        v-for="(item,index) in sizeList"
                        :key="index"
                        :label="item.cszCsizenm"
                        :value="item.cszCsizenm"
                        style="padding: 0"
                      ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="ptpType" label="箱型" show-overflow-tooltip sortable >
                  <template slot-scope="scope">
                    <el-select disabled v-model="scope.row.ptpType" filterable clearable size="mini">
                      <el-option
                        v-for="(item,index) in boxList"
                        :key="index"
                        :label="item.ctpCommcode"
                        :value="item.ctpCommcode"
                        style="padding: 0"
                      ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="ptpPrice" label="价格" show-overflow-tooltip sortable >
                  <template slot-scope="scope">
                    <el-input disabled v-model="scope.row.ptpPrice" clearable size="mini"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="ptpCurrency" label="币种" show-overflow-tooltip sortable >
                  <template slot-scope="scope">
                    <el-select disabled v-model="scope.row.ptpCurrency" filterable clearable size="mini">
                      <el-option
                        v-for="(item,index) in moneyCateList"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                        style="padding: 0"
                      ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <!-- 弹窗下方解决方案明细模块 -->
        <div class="dialogBotBox">
          <div class="botTitl">解决方案明细</div>
          <div class="solveDetailTable">
            <el-table :data="solveDetailTableData" border :height="solveDetailTableHeight" :header-cell-style="{ textAlign: 'center' }" highlight-current-row @row-click="getMainBotCurrent">
              <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
              <el-table-column prop="stnSequence" label="操作序列" width="110px" show-overflow-tooltip sortable>
                <template slot-scope="scope">
                  <el-input disabled v-model="scope.row.stnSequence" clearable size="mini"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="stnServicecode" label="服务" width="110px" show-overflow-tooltip sortable >
                <template slot-scope="scope">
                  <el-select disabled v-model="scope.row.stnServicecode" filterable clearable size="mini">
                    <el-option
                      v-for="(item,index) in serveList"
                      :key="index"
                      :label="item.rvCmeaning"
                      :value="item.rvLowValue"
                      style="padding: 0"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="stnStart" label="起始地" width="90px" show-overflow-tooltip  sortable>
                <template slot-scope="scope">
                  <el-select disabled v-model="scope.row.stnStart" filterable clearable size="mini">
                    <el-option
                      v-for="(item,index) in placeList"
                      :key="index"
                      :label="item.chname"
                      :value="item.ycode"
                      style="padding: 0"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="stnStartaddress" label="起始港/站" width="110px" show-overflow-tooltip  sortable>
                <template slot-scope="scope">
                  <el-select disabled v-model="scope.row.stnStartaddress" filterable clearable size="mini">
                    <el-option
                      v-for="(item,index) in portList"
                      :key="index"
                      :label="item.potCname"
                      :value="item.potCd"
                      style="padding: 0"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="stnDesti" label="目的地" width="90px" show-overflow-tooltip sortable >
                <template slot-scope="scope">
                  <el-select disabled v-model="scope.row.stnDesti" filterable clearable size="mini">
                    <el-option
                      v-for="(item,index) in placeList"
                      :key="index"
                      :label="item.chname"
                      :value="item.ycode"
                      style="padding: 0"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="stnDestination" label="目的港/站" width="110px" show-overflow-tooltip sortable >
                <template slot-scope="scope">
                  <el-select disabled v-model="scope.row.stnDestination" filterable clearable size="mini">
                    <el-option
                      v-for="(item,index) in portList1"
                      :key="index"
                      :label="item.potCname"
                      :value="item.potCd"
                      style="padding: 0"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="stnSupplierEtpId" label="供应商" width="120px" show-overflow-tooltip sortable >
                <template slot-scope="scope">
                  <el-select disabled v-model="scope.row.stnSupplierEtpId" filterable clearable size="mini">
                    <el-option
                      v-for="(item,index) in supplyPeopleList"
                      :key="index"
                      :label="item.fltName"
                      :value="item.fltId"
                      style="padding: 0"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="stnSplId" label="经营人" width="120px" show-overflow-tooltip sortable >
                <template slot-scope="scope">
                  <el-select disabled v-model="scope.row.stnSplId" filterable clearable size="mini">
                    <el-option
                      v-for="(item,index) in peopleList"
                      :key="index"
                      :label="item.splName"
                      :value="item.splId"
                      style="padding: 0"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="stn20gpprice" label="20GP价格" width="120px" show-overflow-tooltip sortable >
                <template slot-scope="scope">
                  <el-input disabled v-model="scope.row.stn20gpprice" clearable size="mini"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="stn20gpcurrency" label="20GP币种" width="120px" show-overflow-tooltip sortable >
                <template slot-scope="scope">
                  <el-select disabled v-model="scope.row.stn20gpcurrency" filterable clearable size="mini">
                    <el-option
                      v-for="(item,index) in moneyCateList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                      style="padding: 0"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="stn40gpprice" label="40GP价格" width="120px" show-overflow-tooltip sortable >
                <template slot-scope="scope">
                  <el-input disabled v-model="scope.row.stn40gpprice" clearable size="mini"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="stn40gpcurrency" label="40GP币种" width="120px" show-overflow-tooltip sortable >
                <template slot-scope="scope">
                  <el-select disabled v-model="scope.row.stn40gpcurrency" filterable clearable size="mini">
                    <el-option
                      v-for="(item,index) in moneyCateList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                      style="padding: 0"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="stn40hqprice" label="40HQ价格" width="120px" show-overflow-tooltip sortable >
                <template slot-scope="scope">
                  <el-input disabled v-model="scope.row.stn40hqprice" clearable size="mini"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="stn40hqcurrency" label="40HQ币种" width="120px" show-overflow-tooltip sortable >
                <template slot-scope="scope">
                  <el-select disabled v-model="scope.row.stn40hqcurrency" filterable clearable size="mini">
                    <el-option
                      v-for="(item,index) in moneyCateList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                      style="padding: 0"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 弹窗最下方审核信息模块 -->
        <div class="lastAuditBox">
          <div class="lastAuditTitle">审核信息</div>
          <div class="lastAuditContent">
            <el-form ref="auditForm" :model="auditForm" label-width="80px"  inline="true" size="mini">
              <el-form-item label="审核意见:" prop="desc">
                <el-input :disabled="disabled" type="textarea" v-model="auditForm.auditSuggest" style="width: 600px"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="mainDialog = false">关闭</el-button>
        <el-button size="mini" type="primary" v-if="!disabled && dialogTitle == '审核'" @click="dialogAudit">审核</el-button>
        <el-button size="mini" type="primary" v-if="!disabled && dialogTitle == '取消审核'" @click="dialogDelAudit">取消审核</el-button>
      </span>
    </el-dialog>
    <show-img-dialog :imgurl="showImgUrl" ref="showImgDialog"></show-img-dialog>

  </div>
</template>

<script>
import paginationMixin from '@/mixins/pagination'
import ShowImgDialog from '@/components/upload/show_image'

const OPERATION_TYPE = {
  ADD: 'add',
  EDIT: 'edit',
  VIEW: 'view'
}

import { getSolveListService,auditService,placeService,getSelectDown,portService,getSizeService,getBoxService,getApplyService,getPeopleList,getSolveDetailService,delAuditService } from '@/request/api'
export default {
  name: 'router.solveAudit',
  mixins: [paginationMixin],
  components: {
    ShowImgDialog
  },
  data() {
    return {
      operation: '',
      showImgUrl: '',
      searchForm: {
        startPlace: '', // 起始地
        endPlace: '', // 目的地
        status: '', // 状态
      },
      placeList: [], // 起始地，目的地下拉框数据
      portList: [], // 起始，目的港站下拉框数据
      portList1: [], // 起始，目的港站下拉框数据
      transportList: [], // 运输分类 下拉框数据
      sizeList: [], // 尺寸 下拉框数据
      boxList: [], // 箱型 下拉框数据
      peopleList: [], // 经营人 下拉框数据
      supplyPeopleList: [], // 供应商 下拉框数据
      serveList: [{label: '铁路运输',value: '1'},{label: '海运运输',value: '2'}], // 服务 下拉框数据
      moneyCateList: [{label: '人民币',value: 'RMB'},{label: '美元',value: 'USD'}], // 币种 下拉框数据
      statusLists: [{label: '未审核',value: 'N'},{label: '已审核',value: 'Y'}], // 状态下拉框数据
      mainTopTableData: [], // 主页上方 解决方案表格数据
      mainTopHeight: 400, // 主页上方 表格高度
      mainTopCurrentData: '', // 主页上方 当前行数据
      mainBotTableData: [], // 主页下方 解决方案表格数据
      mainBotHeight: 230, // 主页下方 表格高度
      activeNames: ['1'], // 控制主页下方 解决方案明细表格的展示
      dialogTitle: '', // 新增弹窗标题
      mainDialog: false, // 控制新增弹窗的出现与隐藏
      basicForm: {
        startPlace: '', // 起始地
        endPlace: '', // 目的地
        startPort: '', // 起运港/站
        endPort: '', // 目的港/站
        routeRadio: 'Y', // 推荐路线
        transport: '', // 运输分类
        workDays: '', // 作业天数
        inOutRadio: 'I', // 进出口
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        desc: '', // 备注
        pdtImageurl: '', // 封面图的路径
      },
      basicRules: {
        startPlace: [
          { required: true, message: '起始地不能为空', trigger: 'blur' }
        ],
        endPlace: [
          { required: true, message: '目的地不能为空', trigger: 'blur' }
        ],
        startPort: [
          { required: true, message: '起运港/站不能为空', trigger: 'blur' }
        ],
        endPort: [
          { required: true, message: '目的港/站不能为空', trigger: 'blur' }
        ],
        routeRadio: [
          { required: true, message: '推荐路线不能为空', trigger: 'blur' }
        ],
        transport: [
          { required: true, message: '运输分类不能为空', trigger: 'blur' }
        ],
        workDays: [
          { required: true, message: '作业天数不能为空', trigger: 'blur' }
        ],
        inOutRadio: [
          { required: true, message: '进出口不能为空', trigger: 'blur' }
        ],
      },
      basicTableData: [], // 弹窗基础信息表格数据
      basicTableHeight: 300, // 弹窗基础信息表格高度
      solveDetailTableData: [], // 弹窗解决方案明细表格数据
      solveDetailTableHeight: 180, // 弹窗解决方案明细表格高度
      mainBotCurrentData: '', // 弹窗 解决方案明细 当前行数据
      uploadDialog: false, // 上传图片弹窗
      uploadForm: {
        fileValue: [], // 图片内容
      },
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      imgData: '',
      auditForm: {
        auditSuggest: '', // 审核意见
      }
    }
  },
  computed: {
    disabled () {
      return this.operation === OPERATION_TYPE.VIEW
    }
  },
  mounted() {
    this.getList()
    this.getSelecteData()
  },
  created() {
  },
  methods: {
    // 双击查看
    view (row) {
      this.operation = OPERATION_TYPE.VIEW
      this.dialogTitle = '查看'
      this.basicForm.startPlace = row.pdtStart
      this.basicForm.endPlace = row.pdtDesti
      this.basicForm.startPort = row.pdtStartaddress
      this.basicForm.endPort = row.pdtDestination
      this.basicForm.routeRadio = row.pdtRecommend
      this.basicForm.transport = row.pdtTransportationsort
      this.basicForm.workDays = row.pdtDate
      this.basicForm.inOutRadio = row.pdtIE
      this.basicForm.startTime = row.pdtSttime
      this.basicForm.endTime = row.pdtEdtime
      this.basicForm.desc = row.pdtRemark
      this.auditForm.auditSuggest = row.pdtInfo
      this.basicForm.pdtImageurl = row.pdtImageurl
      this.solveDetailTableData = row.sysOrdProduct == null ? [] : row.sysOrdProduct
      this.basicTableData = row.sysOrdProductPrice == null ? [] : row.sysOrdProductPrice
      this.mainDialog = true
    },
    lookImg() {
      this.showImgUrl = this.basicForm.pdtImageurl
      this.$refs.showImgDialog.open()
    },
    // 修改 主表 后台返回值
    fabu(row) {
      const statu = row.pdtRelease
      switch (statu) {
      case 'Y':
        return '已发布'
      case 'N':
        return '未发布'
      }
    },
    tuijianluxian(row) {
      const statu = row.pdtRecommend
      switch (statu) {
      case 'Y':
        return '是'
      case 'N':
        return '否'
      }
    },
    zhiding(row) {
      const statu = row.pdtTop
      switch (statu) {
      case 'Y':
        return '是'
      case 'N':
        return '否'
      }
    },
    jinchukou(row) {
      const statu = row.pdtIE
      switch (statu) {
      case 'I':
        return '进口'
      case 'E':
        return '出口'
      }
    },
    // 限制 结束时间不能查过当前日期
    limitEndTime(val) {
      let d = new Date().getTime()
      let f = new Date(val).getTime()
      if(f < d) {
        this.$alert('结束时间不能小于当前日期','提示',{
          confirmButtonText: '确定'
        }).then(() => {
          this.basicForm.endTime = ''
        })
        return
      }
    },

    // 获取港站下拉框
    getPortData(val) {
      portService({potCtyeCode: val}).then(res => {
        if(res.success == 1) {
          this.portList = res.data.FTKJWLHYPT
        }
      })
    },
    clearStart() {
      this.basicForm.startPort = ''
    },
    clearEnd() {
      this.basicForm.endPort = ''
    },
    // 获取 弹窗 解决方案明细 表格当前行
    getMainBotCurrent(row) {
      this.mainBotCurrentData = row
      console.log(this.mainBotCurrentData)
      this.mainBotCurrentData.stnStart = this.basicForm.startPlace
      this.mainBotCurrentData.stnDesti = this.basicForm.endPlace
      this.mainBotCurrentData.stnStartaddress = this.basicForm.startPort
      this.mainBotCurrentData.stnDestination = this.basicForm.endPort
    },
    // 监听弹窗关闭事件
    basicClose() {
      this.mainTopCurrentData = ''
      this.basicTableData = []
      this.solveDetailTableData = []
      this.$refs.basicForm.resetFields()
      this.getList()

    },
    // 判断目的地  是否与出发地相同
    sameToStart(val) {
      if(this.basicForm.startPlace == val) {
        this.$alert('目的地不能与出发地相同','提示',{
          confirmButtonText: '确定'
        })
        return
      }
      portService({potCtyeCode: val}).then(res => {
        if(res.success == 1) {
          this.portList1 = res.data.FTKJWLHYPT
        }
      })
    },
    // 获取  解决方案明细  表格数据
    getSolveDetailData() {
      getSolveDetailService({stnPdtId: this.mainTopCurrentData.pdtId}).then(res => {
        this.mainBotTableData = res.data.FTKJWLHYPT
      })
    },
    // 获取当前行数据
    mainTopRowClick(row) {
      this.mainTopCurrentData = row
      setTimeout(() => {
        this.getSolveDetailData()
      }, 300)
    },

    // 获取 解决方案列表  数据
    getList() {
      getSolveListService(this.searchForm).then(res => {
        if(res.success == 1) {
          this.mainTopTableData = res.data.FTKJWLHYPT
          this.Pagination.total = res.data.total.FTKJWLHYPT
        }
      })
    },
    // 搜索按钮
    searchBtn() {
      this.getList()
    },
    // 审核
    audit() {
      if(Object.keys(this.mainTopCurrentData).length == 0) {
        this.$alert('请选择一条数据','提示',{
          confirmButtonText: '确定'
        })
        return
      }
      if(this.mainTopCurrentData.pdtStatusName !== '未审核') {
        this.$alert('不是未审核状态，不能审核','提示',{
          confirmButtonText: '确定'
        })
        return
      }
      this.operation = OPERATION_TYPE.EDIT
      this.basicForm.startPlace = this.mainTopCurrentData.pdtStart
      this.basicForm.endPlace = this.mainTopCurrentData.pdtDesti
      this.basicForm.startPort = this.mainTopCurrentData.pdtStartaddress
      this.basicForm.endPort = this.mainTopCurrentData.pdtDestination
      this.basicForm.routeRadio = this.mainTopCurrentData.pdtRecommend
      this.basicForm.transport = this.mainTopCurrentData.pdtTransportationsort
      this.basicForm.workDays = this.mainTopCurrentData.pdtDate
      this.basicForm.inOutRadio = this.mainTopCurrentData.pdtIE
      this.basicForm.startTime = this.mainTopCurrentData.pdtSttime
      this.basicForm.endTime = this.mainTopCurrentData.pdtEdtime
      this.basicForm.desc = this.mainTopCurrentData.pdtRemark
      this.basicForm.pdtImageurl = this.mainTopCurrentData.pdtImageurl
      this.auditForm.auditSuggest = ''
      this.solveDetailTableData = this.mainTopCurrentData.sysOrdProduct == null ? [] : this.mainTopCurrentData.sysOrdProduct
      this.basicTableData = this.mainTopCurrentData.sysOrdProductPrice == null ? [] : this.mainTopCurrentData.sysOrdProductPrice
      this.dialogTitle = '审核'
      this.mainDialog = true
    },
    // 取消审核
    delAudit() {
      if(Object.keys(this.mainTopCurrentData).length == 0) {
        this.$alert('请选择一条数据','提示',{
          confirmButtonText: '确定'
        })
        return
      }
      if(this.mainTopCurrentData.pdtStatusName !== '已审核') {
        this.$alert('不是已审核状态，不能取消审核','提示',{
          confirmButtonText: '确定'
        })
        return
      }
      this.operation = OPERATION_TYPE.EDIT
      this.basicForm.startPlace = this.mainTopCurrentData.pdtStart
      this.basicForm.endPlace = this.mainTopCurrentData.pdtDesti
      this.basicForm.startPort = this.mainTopCurrentData.pdtStartaddress
      this.basicForm.endPort = this.mainTopCurrentData.pdtDestination
      this.basicForm.routeRadio = this.mainTopCurrentData.pdtRecommend
      this.basicForm.transport = this.mainTopCurrentData.pdtTransportationsort
      this.basicForm.workDays = this.mainTopCurrentData.pdtDate
      this.basicForm.inOutRadio = this.mainTopCurrentData.pdtIE
      this.basicForm.startTime = this.mainTopCurrentData.pdtSttime
      this.basicForm.endTime = this.mainTopCurrentData.pdtEdtime
      this.basicForm.desc = this.mainTopCurrentData.pdtRemark
      this.auditForm.auditSuggest = ''
      this.solveDetailTableData = this.mainTopCurrentData.sysOrdProduct == null ? [] : this.mainTopCurrentData.sysOrdProduct
      this.basicTableData = this.mainTopCurrentData.sysOrdProductPrice == null ? [] : this.mainTopCurrentData.sysOrdProductPrice
      this.dialogTitle = '取消审核'
      this.mainDialog = true
    },
    // 监听主页下方表格的展示
    handleChange(val) {
      if(val.length == 0) {
        this.mainTopHeight = 660
      }else {
        this.mainTopHeight = 400
      }
    },
    // 监听弹窗关闭事件
    dialogClose() {
      this.auditForm.auditSuggest = ''
    },
    // 弹窗内审核按钮
    dialogAudit() {
      auditService({pdtId: this.mainTopCurrentData.pdtId,pdtInfo: this.auditForm.auditSuggest,}).then(res => {
        if(res.success == 1) {
          this.$message({
            type: 'success',
            message: '审核成功'
          })
          this.mainDialog = false
          this.getList()
        }
      })
    },
    // 弹窗内取消审核按钮
    dialogDelAudit() {
      delAuditService({pdtId: this.mainTopCurrentData.pdtId,pdtInfo: this.auditForm.auditSuggest,}).then(() => {
        this.$message({
          type: 'success',
          message: '取消审核成功'
        })
        this.mainDialog = false
        this.getList()
      })
    },
    // 获取下拉框数据  接口
    getSelecteData() {
      // 起始地目的地
      placeService().then(res => {
        if(res.success == 1) {
          this.placeList = res.data
        }
      })
      // 运输分类
      getSelectDown({rvDomain: '运输分类'}).then(res => {
        if(res.success == 1) {
          this.transportList = res.data.FTKJWLHYPT
        }
      })
      portService({potCtyeCode: ''}).then(res => {
        if(res.success == 1) {
          this.portList1 = res.data.FTKJWLHYPT
          this.portList = res.data.FTKJWLHYPT
        }
      })
      // 运输类型
      getSelectDown({rvDomain: '运输类型'}).then(res => {
        if(res.success == 1) {
          this.serveList = res.data.FTKJWLHYPT
        }
      })
      // 尺寸
      getSizeService().then(res => {
        if(res.success == 1) {
          this.sizeList = res.data.FTKJWLHYPT
        }
      })
      // 箱型
      getBoxService().then(res => {
        if(res.success == 1) {
          this.boxList = res.data.FTKJWLHYPT
        }
      })
      // 供应商
      getApplyService().then(res => {
        if(res.success == 1) {
          this.supplyPeopleList = res.data.FTKJWLHYPT
        }
      })
      // 经营人
      getPeopleList().then(res => {
        if(res.success == 1) {
          this.peopleList = res.data.FTKJWLHYPT
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.solveAudit {
  .topForm {
    padding-top: 10px;
  }
  .btnBox {
    padding-left: 10px;
  }
  .tableBox {
    .topTable {
      padding-top: 10px;
    }
    .block {
      height: 40px;
    }
    .botTable {
      ::v-deep.el-collapse-item__header {
        padding-left: 10px;
      }
    }
  }
}
// 弹窗内的样式
.dialogBox {
  width: 100%;
  height: 660px;
  border: 1px solid #ccc;
  .dialogTopBox {
    width: 100%;
    height: 340px;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    .topLeft {
      width: 65%;
      height: 100%;
      border-right: 1px solid #ccc;
      position: relative;
      .topLeftTitle {
        background-color: #fff;
        position: absolute;
        top: -12px;
        width: 56px;
      }
      .basicInfoBox {
        padding-top: 15px;
      }
    }
    .topRight {
      width: 35%;
    }
  }
  .dialogBotBox {
    .botTitl {
      padding-left: 10px;
    }
    .solveDetailTable {
      padding-top: 5px;
    }
    ::v-deep .solveDetailTable {
      padding-top: 5px;
      .el-input__inner {
        padding: 0;
      }
      .cell.el-tooltip {
        padding: 0;
      }
    }
  }
  .lastAuditBox {
    .lastAuditTitle {
      height: 30px;
      line-height: 30px;
      padding-left: 10px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 10px;
    }
  }
}
::v-deep .el-dialog {
  margin-top: 10vh !important;
}
::v-deep .basicTable .el-input__inner {
  padding: 0;
}
::v-deep .basicTable .cell.el-tooltip {
  padding: 0;
}
</style>
